<template>
  <div class="expression" @click="click">
    <img v-for="(value, key) in this.expression" :src="value" :data-key="key">
  </div>
</template>

<script>
  export default {
    data () {
      return {
      }
    },
    props: ['lastEditRange', 'editID'],
    methods: {
      click (ev) {
        this.$emit('select', ev.target.getAttribute('data-key'));
        this.insert();
      },
      insert () {
				// var edit = document.getElementById(this.editID);
				// // var emojiInput = document.getElementById('emojiInput')
				// var insertText = '<img data-v-6bbac036="" src="" data-key="14">'; //'
				// edit.focus()
				// var selection = getSelection()
				// if (this.lastEditRange) {
				// 	selection.removeAllRanges()
				// 	selection.addRange(this.lastEditRange)
				// }
				// // debugger
				// if (selection.anchorNode.nodeName != '#text') {
				// 	var emojiText = document.createTextNode(insertText)
				// 	if (edit.childNodes.length > 0) {
				// 		for (var i = 0; i < edit.childNodes.length; i++) {
				// 			if (i == selection.anchorOffset) {
				// 				edit.insertBefore(emojiText, edit.childNodes[i])
				// 				break;
				// 			}
				// 		}
				// 	} else {
				// 		var temp = '';
				// 		var img = document.createElement('img');
				// 		img.src = temp
				// 		edit.appendChild(img)
				// 		// edit.appendChild(emojiText)
				// 	}
				// 	// debugger
				// 	var range = document.createRange()
				// 	range.selectNodeContents(emojiText)
				// 	range.setStart(emojiText, emojiText.length)
				// 	range.collapse(true)
				// 	selection.removeAllRanges()
				// 	selection.addRange(range)
				// } else {
				// 	var range = selection.getRangeAt(0)
				// 	var textNode = range.startContainer;
				// 	var rangeStartOffset = range.startOffset;
				// 	textNode.insertData(rangeStartOffset, insertText)
				// 	range.setStart(textNode, rangeStartOffset + insertText.length)
				// 	// range.setStart(textNode, rangeStartOffset + emojiInput.value.length)
				// 	range.collapse(true)
				// 	selection.removeAllRanges()
				// 	selection.addRange(range)
				// }
				// // this.lastEditRange = selection.getRangeAt(0)
				// this.$emit('blind', selection.getRangeAt(0));
			}
    }
  }
</script>

<style lang="scss" scoped>
  @import '../../assets/sass/function';
  .expression {
    height: px2rem(672px);
    background: #fff;
    overflow-y: auto;
    padding: px2rem(10px) 0;
    img {
      padding: px2rem(10px);
      width: px2rem(88px);
      height: px2rem(88px);
      margin: 0;
    }
  }
</style>